<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <style>
        html,body{
            height: 100%;
        }
        .main{
            width:90%;
            height: 70%;
            border: 2px solid #ccc;
            margin:auto auto;
        }
        .header{
            height:8%;
            border-bottom: 1px solid #ccc;
            color:#5a5a5a;
            text-align: center;

        }
        .header span{
            display: block;
           padding-top:2% 
        }
        .body{
            width:75%;
            height: 92%;
            border-right: 1px solid #ccc;
            clear: both;
            float: left;
        }
         .right{
            width:23%;
            float:left;
        }
        .show{
            height: 85%;
            border-bottom: 1px solid #ccc;
        }
        .input{
            height: 15%;
        }
        #mes{
            width:95%;
            height: 80%;
            outline:none;
            resize:none;
            border:0;
            font-size:20px;
            float:left;
        }
        .input button{
        
            float: right;
            width:18%;
            height: 38%;
            margin-top:-20px;
            margin-right: 2px;
            border: 0;
        }
        button:hover{
            background: #acf
        }
       
        .show-list{

            /*border:1px solid red;*/
            padding:10px 5px 0px 5px;
            /*padding-right: 5px;*/
        }
        .show-left{
            width:100%;
            /*float: left;*/
          
        }

        .show-right{
            width:100%;       
            text-align: right;     
            /*float: right;*/
        }
        .avatar-left{
            padding:2px 5px;
            background: #cdf
        }

        .avatar-right{
            padding:2px 5px;
            background: #cfd
        }
        .user-list{
            padding: 5px 5px;
            text-align: center;
            font-weight: bold;
        }
    </style>

    <title>Document</title>

</head>

<body>

    <div class="main">
        <div class="header">
            <span>聊天室</span>
        </div>
        <div class="body">
            <div class="show">
              <!--   <div class='show-list'>
                     <div class="show-left"><span class="avatar-left">我</span> hello</div>    
                </div >
                <div class='show-list'>
                    <div class="show-right">hello word <span class="avatar-right">用户#2</span></div> 
                </div>
               -->
            </div>
            <div class="input">
                <textarea  id='mes'></textarea>
                <button onclick="sendMes()">发送</button>
            </div>
        </div>

        <div class="right">
            <div class='user-list'>用户列表（<span id='countUser'>0</span>）</div>
            <ul id='user_list'>
            </ul>
        </div>
    </div>


</body>
<script src="jquery.js"></script>
<script>

    var socket;
    function socketConnect(){
         socket = new WebSocket('ws://47.94.80.240:8282');
    }

    socketConnect();

    //连接成功
    socket.onopen = function (evt) {
        console.log("socket连接成功");
        //提醒上线
        // var mes = {
        //     type: 1
        // }
        // socket.send(JSON.stringify(mes));
    };

    //连接错误回调
    socket.onerror = function (e){
      console.log('连接失败');
        // socketConnect();
    }

    // 开启服务端
    function openServer(){
        $.get('chat.php',function(){
           
        });
    }

    //发送消息
    function sendMes() {

        var val = $('#mes').val();

        if(val==''){
            return;
        }
        var mes = {
            type: 3,
            value: val
        }

        jsonChat('right',val);
        $('#mes').val('');
        socket.send(JSON.stringify(mes));
    }

    //服务端回调
    socket.onmessage = function (event) {

        var data = JSON.parse(event.data);
        // var data = event.data;

        console.log('服务端返回：', data);
    
        // 处理数据
        switch(data.type){
            case 2:  //用户上线通知
                console.log(data.user+'上线了');
                break;
           case 3:  //聊天
                jsonChat('left',data.value,data.user);
                break;
            case 5:  //更新用户列表
                userList(data.info);
                break;
            default:
                console.log(event);     
        }

    };


    //拼接聊天信息
    function jsonChat(place,content,user = '我'){

        if(place=='left'){
            var html = "<div class='show-list'><div class='show-left'><span class='avatar-left'>"+user+"</span>  "+content+"</div></div>";
        }else{
            var html = "<div class='show-list'><div class='show-right'>"+content+"  <span class='avatar-right'>"+user+"</span></div></div>";
        }
        
        $('.show').append(html);
    }

    //用户列表
    function userList(list){
        // console.log(list);
        var html ='';
        var a=0
        for(i in list){
            a++
            html +='<li>'+list[i].substr(8)+'</li>';
        }

        $('#countUser').text(a);
        $('#user_list').html(html);
    }

</script>

</html>